<template>
    <div>
        <div style="width: 100%; height: 10px;"></div>
        <span style="font-weight:bold;color:black">成绩预测</span>
        <div style="width: 100%; height: 10px;"></div>
        <v-chart class="chart" :option="option" autoresize />
    </div>
</template>

<script setup>
import { use } from 'echarts/core'
import { ref, onMounted } from 'vue';
import axios from 'axios'; // 导入 axios
import { RadarChart } from 'echarts/charts';
import { TitleComponent, LegendComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from "vue-echarts";

// 定义 StuId 属性，并将其作为 props
const props = defineProps({
  StuId: String
});

// 使用ref创建响应式变量
const courses = ref([]);
const recommendCourse = ref([]);
const studentId = props.StuId;

// 在组件加载时调用fetchData函数获取数据
onMounted(() => {
    //记得之后改为get方法
  axios.get(`http://localhost:8080/Aduitor/StuCourse?studentId=${studentId}`)
    .then(response => {
      console.log('StuCourse 请求成功：', response);
      // 请求成功，更新学生信息
      courses.value = response.data.courses;
      recommendCourse.value = response.data.recommendCourse;
      // 处理课程数据，将课程名称和分数提取出来
      const course_name = courses.value.map(course => course.name);
      const score = courses.value.map(course => course.score);
      // 更新雷达图数据
      option.value.radar.indicator = course_name.map(name => ({ name, max: 100, color: 'black' }));
      option.value.series[0].data[0].value = score;

    })
    .catch((error) => {
      // 请求失败，处理错误
      console.error("请求失败：", error);
    });
});

use([
  TitleComponent,
  LegendComponent,
  RadarChart,
  CanvasRenderer,
]);

const option = ref({
  legend: {
    data: ['']
  },
  radar: {
    indicator: [],
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [],
          name: ''
        },
      ]
    }
  ]
});
</script>

<style scoped>
.chart {
    width: 100%;
    height: 400px;
    /* 设置合适的高度 */
}
</style>